<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 36</title>
    <style>
        div {
            font-size: 66px;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>

</head>
<body>
<div id="root"></div>
</body>
<script>
    // toRef
    const app = Vue.createApp({
        setup(props, context) {
            const {reactive,toRefs,readonly} = Vue;
            const data = reactive({name: 'dell'})
            setTimeout(() => {
                data.name = 'lee'
            }, 2000)

            const {name} = toRefs(data);
            return {name}
        },

        methods:{
            handleClick(){
                alert(123);
            },
        },

        // created 实例被完全初始化之前
        template: `
          <child @change="handleClick"> parent </child>
        `
    });

    app.component('child', {
        template: `
          <div @click="handleClick"> 点击子组件调用父组件函数 </div>
        `,
        setup(props, context) {
            const { h } = Vue;
            const {attrs, slots, emit} = context;
           /* console.log('slots===', slots)
            return ()=>h('div', {}, slots.default());*/
            function handleClick(){
                emit('change');
            };
            return {
                handleClick,
            }

        }
    })


    const vm = app.mount('#root');
</script>
</html>